<template>
    <div class="container">
      <div class="wrapper" @click="close">
        <swiper :options="swiperOption">
          <swiper-slide class="slide_a">
            <img class="slide-img" src="http://img1.qunarzz.com/sight/p0/1408/21/4ac1b5e700d2846840d100fc626e36fa.jpg_r_800x800_5b35a158.jpg"/>
          </swiper-slide>
          <swiper-slide class="slide_a">
            <img class="slide-img" src="http://img1.qunarzz.com/sight/p0/1408/21/4ac1b5e700d2846840d100fc626e36fa.jpg_r_800x800_5b35a158.jpg"/>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
    </div>
</template>
<script>
    export default {
        name: "CommonGallary",
        data () {
            return {
              swiperOption : {
                  pagination:".swiper-pagination",
                  paginationType : 'fraction',
                  observeParents:true,
                  observer:true
              }
            }
        },
        props : {
           imgs:Array
        },
      methods : {
          close () {
            this.$emit("closeSwiper");
          }
      }
    }
</script>
<style lang="stylus" scoped>

  .container >>> .swiper-container{
    overflow:inherit;
  }
  .container >>> .swiper-pagination-fraction{
    color:white;
    bottom:-.5rem;
  }
 .container{
   background-color:#000;
   position :fixed;
   left:0;
   top:0;
   right:0;
   bottom:0;
   display :flex;
   justify-content center
   flex-direction :column;
   z-index:99;
   .wrapper{
     width:100%;
     height:0;
     padding-bottom :100%;
   }
   .slide-img{
       width:100%
   }
 }
</style>
